<template>
	<view class="box">
		<view class="head">
			<view class="filter">
				<view v-for="item in filterList" :key="item.value">
					<switch :disabled="keyword==item.value" :checked="keyword==item.value" style="transform:scale(0.7)"
						@change="changeSwitch($event,item.value)" />
					{{item.key}}
				</view>
			</view>
			<uni-search-bar radius="5" placeholder="请输入客户名称进行查询" clearButton="always" @confirm="search" @cancel="cancel"
				@clear="cancel" />


			<view class="customer">
				<uni-datetime-picker @change="changeDate" :clear-icon="false" v-model="range" type="daterange" />
			</view>

		</view>

		<view class="indexButton">
			<view style="background-color: #438FE8 ;">流水账</view>
			<view style="background-color:#B139E9">汇总</view>
		</view>


		<view class="tableData">
			<table border="1" class="table">
				<thead>
					<th>日期</th>
					<th>客户</th>
					
					<th>地址</th>
					<th>金额</th>
				</thead>
				<tbody>
					<tr>
						<td class="time">2023-05-20</td>
						<td class="name">星星科技</td>
						<td>北京大兴</td>
						<td class="numbe">300.00</td>
					</tr>
					<tr>
						<td class="time">2023-05-20</td>
						<td class="name">星星科技</td>
						<td>北京大兴</td>
						<td class="numbe">300.00</td>
					</tr>
					<tr>
						<td class="time">2023-05-20</td>
						<td class="name">星星科技</td>
						<td>北京大兴</td>
						<td class="numbe">300.00</td>
					</tr>
					<tr>
						<td class="time">2023-05-20</td>
						<td class="name">星星科技</td>
						<td>北京大兴</td>
						<td class="numbe">300.00</td>
					</tr>

				</tbody>
			</table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filterList: [{
						key: '客户',
						value: '1'
					},
					{
						key: '货品',
						value: '3',
					}, {
						key: '子账户',
						value: '6'
					}
				],

			}
		},
		methods: {
			// 查询
			search(e) {
				this.keyword = e.value
				this.getDataList()
			},
			cancel() {
				this.keyword = ''
				this.getDataList()
			},
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 10px;
		height: 100%;
		width: 100%;
		background-image: url('/static/background.png');
		background-size: cover;
		box-sizing: border-box;
		overflow-y: scroll;

		.head {
			background-color: rgba(255, 255, 255, .8);
			padding: 20rpx 0;
			border-radius: 10rpx;
			margin-bottom: 10px;
			padding-right: 20rpx;

			.filter {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
			}


		}

		.indexButton {
			display: flex;
			justify-content: space-between;
			margin: 0 30rpx;
		}

		.indexButton view {
			padding: 20rpx 60rpx;
			font-size: 35rpx;
			border-radius: 30rpx;
			color: #fff;
			font-weight: bold;
		}

		.tableData {
			margin-top: 40rpx;
			width: 100%;
			background-color: #fff;

			.table {
				width: 100%;
				border-collapse: collapse;
				border-color: #ececec;

				td {
					padding: 0 10rpx;
					line-height: 2;

					text {
						color: blue;
					}
				}

				.name {
					text-align: center;
				}
				.time{
					text-align: left;
				}

				.numbe {
					text-align: right;
				}


			}
		}


	}
</style>